<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cell Editing Grid Example</title>
    <!-- Use the scoped CSS stylesheet. This is in conjunction with setting Ext.scopeResetCSS = true in app init code --> 
    <script>
        // use the scoped CSS stylesheet if the url has a scopecss parameter
        document.write('<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all' +
            ((window.location.search.indexOf('scopecss') === -1) ? '' : '-scoped') + '.css" />');
    </script>
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    <link rel="stylesheet" type="text/css" href="../ux/css/CheckHeader.css" />

    <!-- GC -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="text/javascript" src="cell-editing.js"></script>
</head>
<body>
    <h1>Cell Editing Grid Example</h1>
    <ul>
    <li>This example shows how to enable users to edit the contents of a grid.</li>
    <li>Note that the js is not minified so it is readable. See <a href="cell-editing.js">cell-editing.js</a>.</li>
    <li>This example also illustrates how to scope ExtJS's CSS reset to only encapsulate each ExtJS Component rendered into a page to avoid interference with existing themes.</li>
    <li>Note how this unordered list retains default styling while the unordered list in the "Light" dropdown is styled as a picker.</li>
    </ul>
    <div id="editor-grid"></div>
</body>
</html>
